<template>
    
<div  class="solid flex-1 flex flex-col overflow-y-auto min-h-[300px]"><!--中间内容区-->
     <Song class="hover:transition duration-150 ease-in-out" v-for="(songData,index) in nowDatas" :key="index" :songData="songData"></Song>
</div>
    
</template>
<script>
import Song from '@/components/Song.vue';
import axios from 'axios';

export default{
    name:'mySave',
    components:{Song},
    data(){
        return{
            songData:{
                songId:0,
                songCoverSrc:'/',
                songTitle:'无',
                songAudioSrc:'/',

            },
            newDatas:[],
            nowDatas:[],
            IsList:false
        }
    },
    mounted(){
        axios.get('http://127.0.0.1:3001/getMusic').then((response)=>{
            console.log('后端返回的数据：', response.data);
            this.newDatas=[];
            const songCoverSrcs=response.data.imageList
            const songTitles=response.data.titles;
            const songAudioSrcs=response.data.audioList
            for(let i=0;i<songCoverSrcs.length;i++){
                this.newDatas.push({
                    songId:i+1,
                    songCoverSrc:songCoverSrcs[i],
                    songTitle:songTitles[i],
                    songAudioSrc:songAudioSrcs[i]
                })
            };
            
        })
            const username=localStorage.getItem("username")//获得用户名
            const saveSongData=new FormData();
            saveSongData.append("username",username);
            axios.post('http://127.0.0.1:8080/getSavingSongs',saveSongData).then((response)=>{
            this.nowDatas=this.newDatas.filter(newData=>{
            return response.data.some(responseData=>responseData['musicName']==newData['songTitle'])
              })
            })
       
      

        
    }
    }
</script>